{% extends "_layouts/examples.html" %}
{% block title %}Grid / Nesting - Small screens{% endblock %}

{% block standalone_css %}patterns_grid-8{% endblock %}

{% block content %}
<div class="grid-row grid-demo">
  <div class="grid-col-small-4">
    .grid-col-small-4
    <div class="grid-row">
      <div class="grid-col-small-2">
        .grid-col-small-2
        <div class="grid-row">
          <div class="grid-col-small-1">
            .grid-col-small-1
          </div>
          <div class="grid-col-small-1">
            .grid-col-small-1
          </div>
        </div>
      </div>
      <div class="grid-col-small-2">
        .grid-col-small-2
      </div>
    </div>
  </div>
  <div class="grid-col-small-3">
    .grid-col-small-3
    <div class="grid-row">
      <div class="grid-col-small-1">
        .grid-col-small-1
      </div>
      <div class="grid-col-small-1">
        .grid-col-small-1
      </div>
      <div class="grid-col-small-1">
        .grid-col-small-1
      </div>
    </div>
  </div>
  <div class="grid-col-small-1">
    .grid-col-small-1
  </div>
  <div class="grid-col-small-4">
    <div class="grid-row">
      <div class="grid-col-small-1">
        .grid-col-small-1
      </div>
      <div class="grid-col-small-2">
        .grid-col-small-2
        <div class="grid-row">
          <div class="grid-col-small-1">
            .grid-col-small-1
          </div>
          <div class="grid-col-small-1">
            .grid-col-small-1
          </div>
        </div>
      </div>
      <div class="grid-col-small-1">
        .grid-col-small-1
      </div>
    </div>
  </div>
</div>
{% endblock %}
